import React from "react";
import style from "./index.module.scss";
import header from "../../base/Header/index";
import {request} from "../../serverAPI/index";

import {message_icon,search_icon,shopcart_icon} from '../../common/icon/svg';
const bookCoverDefault = require("../../common/imageDefault/book-cover-default.png").default;

class BookSearchKey extends React.Component{

    state = {
        userInfo:{bid: ""},
        searchkey:"",
        bookList:[]
    }

    seachkeyMarkTrans(str){
        let {searchkey} = this.state;
        let argArr = [];
        let argArrRes = [];
        if(searchkey){
            let keyStart = str.indexOf(searchkey);
            let keyEnd = keyStart + searchkey.length;
            if(keyStart < 0){
                argArrRes = [str];
            }else{
                argArr = [str.substr(0,keyStart),str.substr(keyStart,searchkey.length),str.substr(keyEnd,str.length)];
                argArr = argArr.forEach(item => {
                    if(item) argArrRes.push(item) 
                })
            }
            argArrRes = argArrRes.map((item,ii)=>{
                if(item != searchkey) return <span key={ii}>{item}</span>
                else return <span key={ii} className={style["seachkey-mark"]}>{searchkey}</span>
            })
        }
        return argArrRes;
    }

    searchBooksByKey(){
        this.setState({bookList:[]})
        let {searchkey} = this.state;
        if(!searchkey) return;

        request({
            url:"/searchBooksByKey?keyWord="+searchkey,
            method:"GET",
        }).then(res=>{
            let {code,data} = res.data;
            if(code == "01"){
                this.setState({bookList:data})
            }else{
                console.log(res.data);
                alert("数据获取失败！")
            }
        });
    }

    searchKeyChange(e){
        this.setState({searchkey:e.target.value,bookList:[]});
        setTimeout(()=>{
            this.searchBooksByKey();
        },300)
    }

    render(){
        let bookItems = this.state.bookList.map((book,i)=>{
            let nameArr = this.seachkeyMarkTrans(book.name);
            let authorArr = this.seachkeyMarkTrans(book.author);
            let publisherArr = this.seachkeyMarkTrans(book.publisher);
            return (
                <li key={i} className={style["book-item"]}>
                    <img className={style["book-cover"]} src={book.cover?`/apis/${book.cover}`:bookCoverDefault} />
                    <div>
                        <p>书名：{ nameArr}</p>
                        <p>作者：{ authorArr}</p>
                        <p>出版社：{publisherArr}</p>
                        <div>
                            <span className={style["price"]}>￥{ book.price }</span>
                            <span className={style["price2"]}>￥{ book.origin_price}</span>
                            
                        </div>
                        <div  className={style["op-box"]}>
                            <span>库存：{ book.inventory }</span>
                            {book.inventory > 0
                                ? <button
                                    onClick={()=>{
                                        this.props.history.push({pathname:"/BookInfoDetails/"+book.bid})
                                    }}
                                >{shopcart_icon}</button>
                                : <label>售罄</label>
                            }
                        </div>
                    </div>
                    
                </li>
            )
        });


        return (
            <div className={style["index-root"]}>
                {header({title:"图书搜索",history:this.props.history})}
               
                <div className={style["input-box"]}>
                    <input placeholder="搜索书名/作者/出版社"
                        value = {this.state.searchkey}
                        onChange={this.searchKeyChange.bind(this)}
                    ></input>
                    <span className={style.icon}
                        onClick = {this.searchBooksByKey.bind(this)}
                    >{search_icon}</span>
                </div>
                <ul className={style["book-list"]}>
                    {bookItems.length
                        ?  bookItems
                        : <li className={style["list-blank"]}>
                            <i>~ 空空如也 ~</i>
                        </li>
                     }
                </ul>
            </div>
        )
    }
}

export default BookSearchKey;
